<template>
	<uni-popup ref="popup" background-color="#fff" type="bottom" @close="clearPop" @maskClick="clearPop" @touchmove.stop.prevent="moveHandle">
		<view class="number-keyboard" @click.stop="">
			<view class="number_head_num">{{ newNum || '0.0' }}</view>
			<view class="keyboard_box">
				<view style="display: flex">
					<view class="keyboard">
						<view class="button" v-for="(item, index) in numbers" :key="index" @click.stop="appendInput(item)">{{ item }}</view>
					</view>
					<view>
						<view @click.stop="delInput" class="delete-btn">
							<image src="@/static/imgs/delete.png"></image>
						</view>
						<view class="clear_btn" @click.stop="clearInput">全部清除</view>
						<view class="save_btn" @click.stop="saveInput">保存</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	/**
	 *
	 *
	 * NavBar 自定义弹窗
	 * @event {newNum} num 数量
	 * @event {Function} saveInput 保存
	 *
	 * @example <h-num-keyboard :num="mealNum" :unit="addDetail?.unit" @bind="bindNum"></h-num-keyboard>
	 */
	import { nextTick, ref, watch } from 'vue'
	const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, '.'])
	const props = defineProps({
		num: {
			type: String,
		},
		show: {
			type: Boolean,
		},
	})
	const newNum = ref('')
	const popup = ref(null)
	watch(
		() => props.show,
		(newVal, oldVal) => {
			console.log(props.show)
			nextTick(() => {
				if(props.show) {
					popup.value.open()
				} else {
					popup.value.close()
				}
				newNum.value = props.num
			})
		}, {
			immediate: true,
		},
	)
	const emit = defineEmits(['bind', 'clear'])

	function change(e) {

	}

	function moveHandle() {
		return false;
	}

	function appendInput(val) {
		// 将每次按键的值拼接到value变量中，注意+=写法
		if(newNum.value.length > 0) {
			console.log(newNum.value.indexOf('.'))
			if(newNum.value.indexOf('.') >= 0) {
				var l = newNum.value.split('.')
				if(val !== '.') {
					if(l[1].length < 2) {
						newNum.value += val
					}
				}
			} else {
				if(val == '.') {
					newNum.value += val
				} else {
					var a = Number(newNum.value + val)
					if(a < 999999.99) {
						newNum.value = a.toString()
					}
				}
			}
		} else {
			if(val != '.') {
				newNum.value += val
			}
		}
	}

	function delInput() {
		// 删除value的最后一个字符
		if(newNum.value.length) {
			newNum.value = newNum.value.substr(0, newNum.value.length - 1)
		}
	}

	function clearInput() {
		newNum.value = ''
	}

	function saveInput() {
		var num = newNum.value || "0"
		emit('bind', num.toString())
	}

	function clearPop() {
		emit('clear')
	}
</script>

<style lang="scss" scoped>
	.number_head_num {
		margin: 0 auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 61rpx;
		color: #202020;
		line-height: 125rpx;
		text-align: center;
	}
	
	.keyboard_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f6f6f6;
		padding: 20rpx 0;
	}
	
	.keyboard {
		display: grid;
		grid-template-columns: repeat(3, 160rpx);
		grid-gap: 10px;
	}
	
	.button,
	.delete-btn,
	.clear_btn {
		width: 160rpx;
		height: 71rpx;
		font-weight: 500;
		font-size: 47rpx;
		color: #000000;
		background: #ffffff;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		text-align: center;
		line-height: 71rpx;
		border: none;
	}
	
	.decimal-btn {
		grid-column: span 1;
	}
	
	.delete-btn {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 68rpx;
			height: 33rpx;
		}
	}
	
	.clear_btn {
		font-size: 20rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	
	.save_btn {
		width: 160rpx;
		height: 162rpx;
		background:#00C1B9;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 162rpx;
	}
</style>